<template>
  <div class="umsUser-add-update-component">
    <el-dialog
      v-if="modelValue.visible"
      v-model="modelValue.visible"
      :title="
        modelValue.form.id
          ? `新增${modelValue.title}`
          : `修改${modelValue.title}`
      "
      width="550px"
    >
      <div style="padding-right: 50px">
        <el-form
          :model="modelValue.form"
          :rules="modelValue.rules"
          ref="addEditRef"
          :label-width="80"
        >
          <el-form-item label="id" prop="id">
            <el-input
              placeholder="请输入id"
              v-model="modelValue.form.id"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="openid" prop="openid">
            <el-input
              placeholder="请输入openid"
              v-model="modelValue.form.openid"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="user_name" prop="userName">
            <el-input
              placeholder="请输入user_name"
              v-model="modelValue.form.userName"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="nick_name" prop="nickName">
            <el-input
              placeholder="请输入nick_name"
              v-model="modelValue.form.nickName"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="password" prop="password">
            <el-input
              placeholder="请输入password"
              v-model="modelValue.form.password"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="salt" prop="salt">
            <el-input
              placeholder="请输入salt"
              v-model="modelValue.form.salt"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="status" prop="status">
            <el-input
              placeholder="请输入status"
              v-model="modelValue.form.status"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="phoneNumber" prop="phoneNumber">
            <el-input
              placeholder="phoneNumber"
              v-model="modelValue.form.phoneNumber"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="sex" prop="sex">
            <el-input
              placeholder="请输入sex"
              v-model="modelValue.form.sex"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="avatar" prop="avatar">
            <el-input
              placeholder="请输入avatar"
              v-model="modelValue.form.avatar"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="user_type" prop="userType">
            <el-input
              placeholder="请输入user_type"
              v-model="modelValue.form.userType"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="created_by" prop="createdBy">
            <el-input
              placeholder="请输入created_by"
              v-model="modelValue.form.createdBy"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="updated_by" prop="updatedBy">
            <el-input
              placeholder="请输入updated_by"
              v-model="modelValue.form.updatedBy"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="created_at" prop="createdAt">
            <el-input
              placeholder="请输入created_at"
              v-model="modelValue.form.createdAt"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="updated_at" prop="updatedAt">
            <el-input
              placeholder="请输入updated_at"
              v-model="modelValue.form.updatedAt"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="is_deleted" prop="isDeleted">
            <el-input
              placeholder="请输入is_deleted"
              v-model="modelValue.form.isDeleted"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer v-if="!modelValue.form.disabled">
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="ensure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { addUmsUser, updateUmsUser } from '@/api/umsUser.api'

const props = defineProps(['modelValue'])
const addEditRef = ref<FormInstance>()

/***
 * 确认弹框
 */
const ensure = () => {
  startAddRole()
}

/***
 * 取消弹框
 */
const cancel = () => {
  props.modelValue.visible = false
}

const startAddRole = () => {
  let form = props.modelValue.form
  let formData = {
    openid: form.openid,
    user_name: form.user_name,
    nick_name: form.nick_name,
    password: form.password,
    salt: form.salt,
    status: form.status,
    phoneNumber: form.phoneNumber,
    sex: form.sex,
    avatar: form.avatar,
    user_type: form.user_type,
  }

  if (!addEditRef.value) return
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateUser({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel()
            ElMessage({
              message: props.modelValue.title + '修改成功',
              type: 'success',
            })
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList()
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: 'error',
            })
          })
        return
      }

      addUser(formData)
        .then((res) => {
          cancel()
          ElMessage({
            message: props.modelValue.title + '新增成功',
            type: 'success',
          })
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList()
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: 'error',
          })
        })
    }
  })
}
</script>
<style lang="scss" scoped></style>
